<template>
  <view class="container">
    <!-- 回购状态 -->
    <view class="status-bar">
      <text>回购状态：</text>
      <text :class="['status-text', { 'status-processing': status < 2, 'status-completed': status == '2' }]">{{ ['待审核', '转账中', '已转账', '已驳回'][status] }}</text>
    </view>

    <!-- 回购详情 -->
    <view class="detail-container">
      <view class="detail-item">
        <text class="detail-label">申请时间：</text>
        <text class="detail-value">{{ buybackData.applyTime }}</text>
      </view>

      <view class="detail-item">
        <text class="detail-label">审核时间：</text>
        <text class="detail-value">{{ buybackData.auditTime }}</text>
      </view>

      <view class="detail-item" v-if="status === '已打款'">
        <text class="detail-label">打款时间：</text>
        <text class="detail-value">{{ buybackData.paymentTime }}</text>
      </view>

      <view class="detail-item">
        <text class="detail-label">回购金额：</text>
        <text class="detail-value amount">¥ {{ buybackData.amount }}</text>
      </view>

      <view class="detail-item">
        <text class="detail-label">收款账号：</text>
      </view>

      <view class="account-info">
        <view class="account-item">
          <text class="account-label">账户：</text>
          <text class="account-value">{{ buybackData.account.name }}</text>
        </view>

        <view class="account-item">
          <text class="account-label">账号：</text>
          <text class="account-value">{{ buybackData.account.number }}</text>
        </view>

        <view class="account-item">
          <text class="account-label">银行：</text>
          <text class="account-value">{{ buybackData.account.bank }}</text>
        </view>

        <view class="account-item">
          <text class="account-label">开户行：</text>
          <text class="account-value">{{ buybackData.account.branch }} {{ buybackData.account.city }}</text>
        </view>

        <view v-if="buybackData.receiptImage" class="account-item">
          <text class="account-label">开票图片：</text>
        </view>

        <view v-if="buybackData.receiptImage" class="image-container">
          <image class="receipt-image" :src="buybackData.receiptImage" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <!-- 底部空白区域 -->
    <view class="bottom-space"></view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getWithdrawById } from '@/api/bgame';

// 回购状态
const status = ref('转账中');

// 回购详情数据
const buybackData = ref({
  id: '',
  applyTime: '',
  auditTime: '',
  paymentTime: '',
  amount: '',
  account: {
    name: '',
    number: '',
    bank: '',
    branch: '',
    city: '',
  },
  receiptImage: '',
});

// 页面加载
onLoad((options) => {
  if (options.id) {
    buybackData.value.id = options.id;
    // 根据ID获取回购详情
    getBuybackDetail(options.id);
  }

  if (options.status) {
    status.value = options.status;
  }
});

// 获取回购详情
const getBuybackDetail = async (id: any) => {
  // 模拟API请求
  uni.showLoading({
    title: '获取数据...',
  });
  const res: any = await getWithdrawById({ id });
  uni.hideLoading();
  if (1 == res.result) {
    uni.showToast({
      title: '获取数据成功',
      icon: 'success',
    });
    // buybackData
    let data = res.data;
    Object.assign(buybackData.value, {
      amount: data.amounts,
      applyTime: data.created_at,
      paymentTime: data.pay_at,
      auditTime: data.audit_at,
      account: {
        name: data.bank_card.member_name,
        number: data.bank_card.bank_card,
        bank: data.bank_card.bank_name,
        branch: data.bank_card.bank_branch || '',
        city: data.bank_card.bank_city,
      },
      receiptImage: data.invoice_img,
    });
  } else {
    uni.showToast({
      title: res.msg.msg || '获取失败',
      mask: true,
      icon: 'error',
    });
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  background-color: #00a046;
  color: #fff;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
}

.header-icons {
  display: flex;
  align-items: center;
}

.header-icon {
  margin-right: 15px;
}

.header-icon-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-bar {
  display: flex;
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.status-text {
  font-weight: 500;
}

.status-processing {
  color: #ff9800;
}

.status-completed {
  color: #00a046;
}

.detail-container {
  background-color: #fff;
  padding: 0 15px;
}

.detail-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.detail-label {
  width: 80px;
  color: #666;
  font-size: 14px;
}

.detail-value {
  flex: 1;
  color: #333;
  font-size: 14px;
}

.amount {
  color: #ff6b00;
  font-weight: 500;
}

.account-info {
  padding: 10px 30px;
}

.account-item {
  display: flex;
  padding: 8px 0;
}

.account-label {
  width: 70px;
  color: #666;
  font-size: 14px;
}

.account-value {
  flex: 1;
  color: #333;
  font-size: 14px;
}

.image-container {
  padding: 10px 0;
}

.receipt-image {
  width: 100%;
  height: 150px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}

.bottom-space {
  height: 50px;
}
</style>
